<template>
    <div class="back_add">
        <div class="threeImg">
            <div class="Containt">
                <div class="iconleft"  @click="zuohua">
                    <i class="el-icon-arrow-left"></i>
                </div>
                <ul :style="{'left':calleft + 'px'}" v-if="superurls.length != 0" >
                    <div class="m" style="padding:0 14px;">
                        <li v-for="(item,index) in superurls" :key="index" @click='choose(item.id)'>
                          <img :src="item.keyValuePath" />
                           <i  :class="{'icons':item.id==isActive}"></i>
                        </li>
                    </div>
                </ul>
                 <ul  v-else-if="superurls.length = 0">
                    <li>暂无数据</li>
                </ul>
                <div class="iconright" @click="youhua">
                    <i class="el-icon-arrow-right" ></i>
                </div>
            </div>
        </div>
     </div>
</template>

<script>
    export default {
        name: 'lunbo',
        props:['superurl','isActive'],
        data() {
            return {
                calleft:0,
                superurls:[],
            }
        },

        watch: {
            superurl(val){
                this.superurls = val;
            },
        },

        created () {
            var m= $('.m').width()
        },
        methods:{
            //点击按钮左移
            zuohua() {
                this.calleft -=577;
                if (this.calleft <= -(this.superurls.length/4)*577) {
                    this.calleft = 0
                }
            },
            //点击按钮右移
            youhua() {
                this.calleft -= 577;
                if (this.calleft <= -(this.superurls.length/4)*577) {
                    this.calleft = 0
                }
            },
            //点击选中
            choose(index){
                this.$emit("chooseVal", index)
            }
        }
    }
</script>

<style scoped>

.back_add {
    margin-top: 20px;
}
.threeImg .Containt ul {
    margin: 0 auto;
    width: 10000px;
    position: absolute;
    left: 0px;
    cursor: pointer;
    height: 100%
}

.threeImg .Containt ul li {
    background: #485877;
    width: 115px;
    padding-right: 12px;
    margin-top: 10px;
    float: left;
    margin-left: 17px;
    position: relative;
    height: 68px;
    border-radius: 5px;
    position: relative;

}

.threeImg .Containt ul li img {
    width: 40px;
    height: 40px;
    position:relative;
    left: 50%;
    top: 50%;
    margin-left: -13px;
    margin-top: -20px;
}

.threeImg .Containt ul li:hover{
    box-shadow: 0px 2px 20px #beb7b7;
   -webkit-transition: .3s transform;
    transition: .3s transform;
   -webkit-transform: scale(1.05, 1.05);
    transform: scale(1.05, 1.05);

}
.Containt {
    position: relative;
    width: 625px;
    height: 100px;;
     overflow: hidden;
    margin: 0 auto;
}

.iconleft {
     position: absolute;
    width: 30px;
    left: -8px;
    z-index: 99999;
    font-size: 30px;
    cursor: pointer;
    background: #fff;
    height: 52px;
    display: inline-block;
    padding-top: 32px;
}

.iconright {
    position: absolute;
    right: -3px;
    width: 30px;
    z-index: 99999;
    font-size: 30px;
    cursor: pointer;
    background: #fff;
    height: 52px;
    display: inline-block;
    padding-top: 32px;
}
.icons{
    bottom: 7px;
    right: 10px;
    display: inline-block;
    width: 14px;
    height: 14px;
    position: absolute;
    background: url(./../assets/images/right.png) no-repeat;
}

</style>
